<template>
  <view class="data-dashboard">
    <!-- 顶部统计卡片 -->
    <view class="stats-section">
      <view class="stats-grid">
        <view 
          v-for="stat in statsData" 
          :key="stat.id"
          class="stat-card"
          :class="stat.type"
          @click="handleStatClick(stat)"
        >
          <view class="stat-icon" :style="{ backgroundColor: stat.color }">
            {{ stat.icon }}
          </view>
          <view class="stat-content">
            <text class="stat-value">{{ formatValue(stat.value, stat.unit) }}</text>
            <text class="stat-label">{{ stat.label }}</text>
            <view class="stat-trend" :class="stat.trend">
              <text class="trend-icon">{{ stat.trendIcon }}</text>
              <text class="trend-text">{{ stat.trendValue }}%</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 图表区域 -->
    <view class="charts-section">
      <view class="chart-grid">
        <!-- 库存趋势图 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">库存趋势</text>
            <view class="chart-controls">
              <view 
                v-for="period in timePeriods" 
                :key="period.value"
                class="control-btn"
                :class="{ active: activePeriod === period.value }"
                @click="changePeriod(period.value)"
              >
                <text class="btn-text">{{ period.label }}</text>
              </view>
            </view>
          </view>
          <DataChart 
            :chart-id="'inventoryTrend'" 
            type="line" 
            :data="inventoryTrendData"
            :height="300"
          />
        </view>

        <!-- 物料分类占比 -->
        <view class="chart-card">
          <view class="card-header">
            <text class="card-title">物料分类占比</text>
            <view class="chart-legend">
              <view 
                v-for="item in categoryData" 
                :key="item.name"
                class="legend-item"
              >
                <view class="legend-color" :style="{ backgroundColor: item.color }"></view>
                <text class="legend-text">{{ item.name }}</text>
                <text class="legend-percent">{{ item.percent }}%</text>
              </view>
            </view>
          </view>
          <DataChart 
            :chart-id="'categoryPie'" 
            type="pie" 
            :data="categoryChartData"
            :height="300"
          />
        </view>
      </view>
    </view>

    <!-- 预警信息 -->
    <view class="warnings-section">
      <view class="section-header">
        <text class="section-title">库存预警</text>
        <view class="warning-summary">
          <text class="summary-text">{{ totalWarnings }} 个预警</text>
        </view>
      </view>
      <view class="warning-list">
        <view 
          v-for="warning in warnings" 
          :key="warning.id"
          class="warning-item"
          :class="warning.severity"
          @click="handleWarningClick(warning)"
        >
          <view class="warning-icon">{{ warning.icon }}</view>
          <view class="warning-content">
            <text class="warning-title">{{ warning.title }}</text>
            <text class="warning-desc">{{ warning.description }}</text>
            <text class="warning-count">{{ warning.count }} 项</text>
          </view>
          <view class="warning-action">
            <text class="action-text">处理</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门物料 -->
    <view class="materials-section">
      <view class="section-header">
        <text class="section-title">热门物料排行</text>
        <view class="section-actions">
          <text class="action-link" @click="viewAllMaterials">查看全部</text>
        </view>
      </view>
      <view class="material-list">
        <view 
          v-for="(material, index) in topMaterials" 
          :key="material.id"
          class="material-item"
          @click="showMaterialDetail(material)"
        >
          <view class="material-rank">#{{ index + 1 }}</view>
          <view class="material-info">
            <text class="material-name">{{ material.name }}</text>
            <text class="material-spec">{{ material.spec }}</text>
          </view>
          <view class="material-stats">
            <text class="stock-value">{{ formatNumber(material.stock) }}</text>
            <text class="turnover-rate">{{ material.turnover }}%</text>
          </view>
          <view class="material-status" :class="material.status">
            {{ getStatusText(material.status) }}
          </view>
        </view>
      </view>
    </view>

    <!-- 业务建议 -->
    <view class="insights-section">
      <view class="section-header">
        <text class="section-title">智能业务建议</text>
        <view class="section-actions">
          <text class="action-link" @click="viewAllInsights">查看更多</text>
        </view>
      </view>
      <view class="insight-list">
        <view 
          v-for="insight in businessInsights" 
          :key="insight.id"
          class="insight-item"
          :class="insight.priority"
        >
          <view class="insight-icon">{{ insight.icon }}</view>
          <view class="insight-content">
            <text class="insight-title">{{ insight.title }}</text>
            <text class="insight-desc">{{ insight.description }}</text>
          </view>
          <view class="insight-action">
            <text class="action-text" @click="handleInsightAction(insight)">
              {{ insight.actionText }}
            </text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

export default {
  components: {
    DataChart: () => import('./DataChart.vue')
  },
  
  props: {
    statsData: {
      type: Array,
      default: () => []
    },
    categoryData: {
      type: Array,
      default: () => []
    },
    materials: {
      type: Array,
      default: () => []
    },
    warnings: {
      type: Array,
      default: () => []
    },
    insights: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  
  data() {
    return {
      activePeriod: '7d',
      timePeriods: [
        { label: '今日', value: '1d' },
        { label: '本周', value: '7d' },
        { label: '本月', value: '30d' },
        { label: '本季', value: '90d' }
      ]
    }
  },
  
  computed: {
    topMaterials() {
      return this.materials.slice(0, 5)
    },
    
    totalWarnings() {
      return this.warnings.reduce((sum, warning) => sum + warning.count, 0)
    },
    
    businessInsights() {
      return this.insights.slice(0, 3)
    },
    
    inventoryTrendData() {
      // 模拟库存趋势数据
      return {
        labels: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        datasets: [
          {
            label: '库存量',
            data: [1200, 1350, 1100, 1450, 1300, 1250, 1400],
            borderColor: '#3b82f6',
            backgroundColor: 'rgba(59, 130, 246, 0.1)',
            borderWidth: 2,
            fill: true
          }
        ]
      }
    },
    
    categoryChartData() {
      return {
        labels: this.categoryData.map(item => item.name),
        datasets: [
          {
            data: this.categoryData.map(item => item.value),
            backgroundColor: this.categoryData.map(item => item.color),
            borderWidth: 0
          }
        ]
      }
    }
  },
  
  methods: {
    formatValue(value, unit) {
      if (unit === '万') {
        return (value / 10000).toFixed(1) + '万'
      }
      if (unit === '%') {
        return value.toFixed(1) + '%'
      }
      return value.toLocaleString()
    },
    
    formatNumber(num) {
      if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      }
      return num.toLocaleString()
    },
    
    getStatusText(status) {
      const statusMap = {
        normal: '正常',
        warning: '预警',
        danger: '危险'
      }
      return statusMap[status] || status
    },
    
    changePeriod(period) {
      this.activePeriod = period
      this.$emit('period-change', period)
    },
    
    handleStatClick(stat) {
      this.$emit('stat-click', stat)
    },
    
    handleWarningClick(warning) {
      this.$emit('warning-click', warning)
    },
    
    showMaterialDetail(material) {
      this.$emit('material-click', material)
    },
    
    handleInsightAction(insight) {
      this.$emit('insight-action', insight)
    },
    
    viewAllMaterials() {
      this.$emit('view-all-materials')
    },
    
    viewAllInsights() {
      this.$emit('view-all-insights')
    }
  },
  
  onLoad() {
    // 可以在这里添加初始化逻辑
  }
</script>

<style lang="scss" scoped>
// 样式变量
$primary-color: #3b82f6;
$success-color: #10b981;
$warning-color: #f59e0b;
$danger-color: #ef4444;
$bg-color: #f8fafc;
$card-bg: #ffffff;
$border-color: #e2e8f0;
$text-primary: #1e293b;
$text-secondary: #64748b;

// 混入
@mixin card-style {
  background: $card-bg;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  margin: 20rpx 0;
  padding: 32rpx;
}

@mixin flex-center {
  display: flex;
  align-items: center;
}

.data-dashboard {
  padding: 20rpx;
}

.stats-section {
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;
    
    .stat-card {
      @include card-style;
      display: flex;
      align-items: center;
      gap: 20rpx;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      &.primary {
        border-left: 4rpx solid $primary-color;
      }
      
      &.success {
        border-left: 4rpx solid $success-color;
      }
      
      &.warning {
        border-left: 4rpx solid $warning-color;
      }
      
      &.danger {
        border-left: 4rpx solid $danger-color;
      }
      
      .stat-icon {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        @include flex-center;
        justify-content: center;
        font-size: 40rpx;
        color: white;
      }
      
      .stat-content {
        flex: 1;
        
        .stat-value {
          display: block;
          font-size: 36rpx;
          font-weight: 700;
          color: $text-primary;
        }
        
        .stat-label {
          display: block;
          font-size: 24rpx;
          color: $text-secondary;
          margin: 8rpx 0;
        }
        
        .stat-trend {
          display: flex;
          align-items: center;
          gap: 8rpx;
          font-size: 24rpx;
          
          &.up {
            color: $success-color;
          }
          
          &.down {
            color: $danger-color;
          }
          
          .trend-icon {
            font-size: 20rpx;
          }
          
          .trend-text {
            font-weight: 500;
          }
        }
      }
    }
  }
}

.charts-section {
  .chart-grid {
    display: flex;
    flex-direction: column;
    gap: 20rpx;
    
    .chart-card {
      @include card-style;
      
      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24rpx;
        
        .card-title {
          font-size: 32rpx;
          font-weight: 600;
          color: $text-primary;
        }
        
        .chart-controls {
          display: flex;
          gap: 12rpx;
          
          .control-btn {
            padding: 8rpx 16rpx;
            border: 1rpx solid $border-color;
            border-radius: 12rpx;
            font-size: 24rpx;
            color: $text-secondary;
            transition: all 0.3s ease;
            
            &.active {
              background: $primary-color;
              color: white;
              border-color: $primary-color;
            }
          }
        }
        
        .chart-legend {
          display: flex;
          flex-wrap: wrap;
          gap: 16rpx;
          
          .legend-item {
            display: flex;
            align-items: center;
            gap: 8rpx;
            font-size: 24rpx;
            
            .legend-color {
              width: 16rpx;
              height: 16rpx;
              border-radius: 50%;
            }
            
            .legend-text {
              color: $text-secondary;
            }
            
            .legend-percent {
              color: $text-primary;
              font-weight: 500;
            }
          }
        }
      }
    }
  }
}

.warnings-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .section-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .warning-summary {
      .summary-text {
        font-size: 28rpx;
        color: $text-secondary;
      }
    }
  }
  
  .warning-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    
    .warning-item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 24rpx;
      background: $card-bg;
      border-radius: 12rpx;
      border: 1rpx solid $border-color;
      transition: all 0.3s ease;
      
      &.warning {
        border-color: $warning-color;
        background: rgba($warning-color, 0.05);
      }
      
      &.danger {
        border-color: $danger-color;
        background: rgba($danger-color, 0.05);
      }
      
      &.info {
        border-color: $primary-color;
        background: rgba($primary-color, 0.05);
      }
      
      &:active {
        transform: scale(0.98);
      }
      
      .warning-icon {
        font-size: 48rpx;
        width: 60rpx;
        text-align: center;
      }
      
      .warning-content {
        flex: 1;
        
        .warning-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: $text-primary;
        }
        
        .warning-desc {
          display: block;
          font-size: 24rpx;
          color: $text-secondary;
          margin: 4rpx 0;
        }
        
        .warning-count {
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
      
      .warning-action {
        .action-text {
          padding: 8rpx 16rpx;
          background: $primary-color;
          color: white;
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

.materials-section,
.insights-section {
  .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24rpx;
    
    .section-title {
      font-size: 36rpx;
      font-weight: 600;
      color: $text-primary;
    }
    
    .section-actions {
      .action-link {
        font-size: 28rpx;
        color: $primary-color;
        text-decoration: underline;
      }
    }
  }
  
  .material-list,
  .insight-list {
    display: flex;
    flex-direction: column;
    gap: 16rpx;
    
    .material-item,
    .insight-item {
      display: flex;
      align-items: center;
      gap: 20rpx;
      padding: 24rpx;
      background: $card-bg;
      border-radius: 12rpx;
      border: 1rpx solid $border-color;
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.98);
      }
      
      &.high {
        border-color: $danger-color;
        background: rgba($danger-color, 0.05);
      }
      
      &.medium {
        border-color: $warning-color;
        background: rgba($warning-color, 0.05);
      }
      
      &.low {
        border-color: $primary-color;
        background: rgba($primary-color, 0.05);
      }
      
      .material-rank,
      .insight-icon {
        font-size: 32rpx;
        font-weight: 700;
        color: $primary-color;
        width: 60rpx;
        text-align: center;
      }
      
      .material-info,
      .insight-content {
        flex: 1;
        
        .material-name,
        .insight-title {
          display: block;
          font-size: 28rpx;
          font-weight: 500;
          color: $text-primary;
        }
        
        .material-spec,
        .insight-desc {
          display: block;
          font-size: 24rpx;
          color: $text-secondary;
          margin-top: 4rpx;
        }
      }
      
      .material-stats {
        text-align: right;
        
        .stock-value {
          display: block;
          font-size: 28rpx;
          font-weight: 600;
          color: $text-primary;
        }
        
        .turnover-rate {
          display: block;
          font-size: 24rpx;
          color: $text-secondary;
        }
      }
      
      .material-status,
      .insight-action {
        .action-text {
          padding: 8rpx 16rpx;
          background: $primary-color;
          color: white;
          border-radius: 8rpx;
          font-size: 24rpx;
        }
      }
      
      .material-status {
        &.normal {
          color: $success-color;
          background: rgba($success-color, 0.1);
          border-radius: 8rpx;
          padding: 4rpx 12rpx;
          font-size: 24rpx;
        }
        
        &.warning {
          color: $warning-color;
          background: rgba($warning-color, 0.1);
          border-radius: 8rpx;
          padding: 4rpx 12rpx;
          font-size: 24rpx;
        }
        
        &.danger {
          color: $danger-color;
          background: rgba($danger-color, 0.1);
          border-radius: 8rpx;
          padding: 4rpx 12rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}
</style>